<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { getCurrentInstance, reactive } from 'vue'
import { getBind } from '@/utils/api/image'
import SuperContent from '@/components/Layer/Note/SuperContent.vue'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getNoteById } from '@/utils/api/note'
import { Up1stWord } from '@/utils'
import { base64ToString } from '@/utils/note'
import Edictor from '@/components/Editor/edictor_note.vue'
import { AlexMsg } from '@2473o/alexui'
import router from '@/router'
import { getInfo } from '@/utils/api/auth'
import { unBind } from '@/utils/api/image/bind'

const route = useRoute()
const app = getCurrentInstance()
const { dayjs } =
  app.appContext.app.config.globalProperties

const EdictorMode = ref(false)

const _data = ref({
  content: '<p>',
  tags: [],
  mark: {},
  images: []
})

const extension = reactive({
  images: []
})

const target_del = ref(null)
const show_dialog = ref(false)
const UnBindImage = async (id) => {
  show_dialog.value = true
  target_del.value = id
}
const submit_del = async () => {
  let res = await unBind(target_del.value)
  if (res.code == 200) {
    setTimeout(() => {
      window.location.reload()
    }, 1000)
  } else {
    AlexMsg({
      type: 'error',
      text: `删除失败：${res.msg}`
    })
  }
}

onMounted(async () => {
  _data.value = await getNoteById(route.params.id)
  _data.value.mark = JSON.parse(
    _data.value.noteFrom
  )
  _data.value.tags = JSON.parse(
    _data.value.noteClassify
  )
  _data.value.content = base64ToString(
    _data.value.noteContext
  )

  _data.value.images = await getBind(
    'note',
    route.params.id
  )
  _data.value.images.map((o) => {
    if (!o.imgUrl.startsWith('http://')) {
      o.imgUrl = `/prod-api/${o.imgUrl}`
    }
  })

  let login_info = await getInfo()
  if (login_info.code == 200) {
    EdictorMode.value = true
  } else {
    AlexMsg({ type: 'warning', text: '请先登录' })
    setTimeout(() => {
      router.push({ path: '/' })
    }, 1000)
  }
})
</script>

<template>
  <AlexDialog
    v-model:show="show_dialog"
    :outsize-colse="true"
  >
    <template #header></template>
    <template #default>
      <div style="width: 15rem; min-height: 5rem">
        <div style="font-size: 1rem">
          是否删除？
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 1rem;
          "
        >
          <AlexBtn
            width="5rem"
            height="2rem"
            radius=".5rem"
            style="
              --alex-btn-bg: #e85600;
              color: #fff;
            "
            @click="submit_del"
            >确认</AlexBtn
          >
          <AlexBtn
            width="5rem"
            height="2rem"
            radius=".5rem"
            style="color: #fff"
            @click="show_dialog = false"
            >取消</AlexBtn
          >
        </div>
      </div>
    </template>
  </AlexDialog>

  <div id="notes" class="notes-item">
    <div
      class="tile-header flex-center justify-between"
    >
      <div
        class="article-header text-gray text-tiny d-flex align-center"
      >
        <div class="flex-center">
          <time class="mr-2">{{
            dayjs(_data.updateTime).fromNow()
          }}</time>
        </div>
      </div>
    </div>

    <SuperContent
      :content="_data.content"
      :tags="_data.tags"
    />

    <div
      class="notes-item-images flex-center justify-start"
    >
      <div
        v-for="(item, index) in _data.images"
        :key="index"
        class="notes-item-images__item c-zoom-in"
      >
        <div
          class="delete"
          @click="UnBindImage(item.id)"
        >
          <i class="czs-trash-l"></i>
        </div>
        <img
          :src="item.imgUrl"
          alt=""
          class="s-rounded"
        />
      </div>

      <div
        v-for="(item, index) in extension.images"
        :key="index"
        class="notes-item-images__item c-zoom-in"
      >
        <img
          :src="item.url"
          alt=""
          class="s-rounded"
        />
      </div>
    </div>

    <div
      class="tile-footer text-gray text-tiny flex-center justify-between"
    >
      <div class="flex-center">
        <!-- <button class="btn btn-link btn-sm text-gray mr-2"><i class="czs-talk"></i> 22</button
      ><button class="btn btn-link btn-sm text-gray mr-2">
        <i class="czs-heart"></i> <span>113</span>
      </button> -->
      </div>

      <span
        class="flex-center"
        v-if="
          _data.mark.os && _data.mark.platform
        "
        ><i
          class="dashicons dashicons-laptop mr-1"
        ></i>
        {{ $t('common.From') }}
        {{ Up1stWord(_data.mark.os['name']) }}
        {{
          Up1stWord(_data.mark.platform['type'])
        }}
      </span>
      <span
        v-else
        class="flex-center loading"
      ></span>
    </div>
  </div>

  <Edictor
    v-model:content="_data.content"
    v-model:tags="_data.tags"
    v-model:images="extension.images"
  ></Edictor>
  <!-- {{  }} -->
</template>

<style lang="scss" scoped>
.tile-header {
  width: 100%;
  margin-bottom: 0.5rem;
}
.notes-item-images {
  .delete {
    cursor: pointer;
    background-color: rgba(
      $color: #ffffff,
      $alpha: 0.75
    );
    border-radius: 0 0 0 0.2rem;
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      font-size: 1rem;
      color: #e85600 !important;
      font-weight: bold;
    }
  }
}

button.alex-btn + button {
  margin: 0 !important;
}
</style>
